<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MutationObserver Demo: ChildList</title>
</head>

<body>
    <ul id="language">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>TypeScript</li>
    </ul>

    <button id="btnStart">Start Observing</button>
    <button id="btnStop">Stop Observing</button>
    <button id="btnAdd">Add</button>
    <button id="btnRemove">Remove the Last Child</button>

    <script>
        (function () {
            let list = document.querySelector('#language');
            let btnAdd = document.querySelector('#btnAdd');
            let btnRemove = document.querySelector('#btnRemove');
            let btnStart = document.querySelector('#btnStart');
            let btnStop = document.querySelector('#btnStop');
            // let observer = new MutationObserver(function (mutations) {
            //     mutations.forEach(function (mutation) {
            //         console.log(mutation.type);
            //         console.log(mutation.addedNodes);
            //         console.log(mutation.removedNodes);
            //     });
            // });

            btnStop.disabled = true;

            function log(mutations) {
                for (let mutation of mutations) {
                    console.log(mutation);
                }
            }
            let observer = new MutationObserver(log);
            btnStart.onclick = function () {
                observer.observe(list, {
                    childList: true,
                    attributes: true,// observe the attributes of the child nodes
                    attributeFilter: ['class', 'style'],// observe only the class and style attributes
                    subtree: true,// observe the child nodes as well, such as options 
                    characterData: true,// observe the text content of the child nodes
                    characterDataOldValue: true,// record the old value of the text content 
                });
                btnStart.disabled = true;
                btnStop.disabled = false;
            };

            let counter = 1;
            btnAdd.onclick = function () {
                // create a new element
                let item = document.createElement('li');
                item.textContent = `New Item ${counter++}`;
                // appand the new element to the list
                list.appendChild(item);
            };
            btnRemove.onclick = function () {
                list.lastElementChild ? list.removeChild(list.lastElementChild) :
                    console.log('No child to remove');
            }
            btnStop.onclick = function () {
                observer.disconnect();
                btnStart.disabled = false;
                btnStop.disabled = true;
            };
            // 变异观察器的实例示例
            function waitForElement(selector) {
                return new Promise(function (resolve, reject) {
                    if (document.querySelector(selector)) {
                        return resolve(element);
                    }
                    const observer = new MutationObserver(() => {
                        const element = document.querySelector(selector);
                        if (element) {
                            resolve(element);
                            observer.disconnect();
                        }
                    });
                    observer.observe(document.body, {
                        childList: true,
                        subtree: true
                    });
                });
            }

        })();
    </script>
</body>

</html>